window.addEventListener('load',function(){
    /* 获取轮播图中的ul，li，每个li的长度，左右箭头 */
    let loopul=this.document.querySelector('.back-center_loop');
    let loopli=this.document.querySelectorAll('.back-center_loop_li');
    let smallul=this.document.querySelector('.back-right_img');
    let smallli=this.document.querySelectorAll('.back-right_li');
    let textul=this.document.querySelector('.back-left_ul');
    let textli=this.document.querySelectorAll('.back-left_li');
    /* 获取图片的长度和左右箭头 */
    let lilength=loopli[0].offsetWidth;
    let smalllength=smallli[0].offsetWidth; 
    let textlength=textli[0].offsetHeight; 
    let al=this.document.querySelector('.back-center_loop_al');
    let ar=this.document.querySelector('.back-center_loop_ar');
    console.log(textli)
    /* 右边的箭头对应的照片 */
    function animateimg(obj, target) {
        clearInterval(obj.timer);  /*防抖节流 */
        obj.timer = setInterval(function () {
            var step = ((target - obj.offsetLeft) / 10);
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.style.left == target) {
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 20)
    }
    /* 左边文字部分 */
    function animatetext(obj, target) {
        clearInterval(obj.texttimer);
        obj.texttimer = setInterval(function () {

            var step = ((target - obj.offsetTop) / 10);
            step = step > 0 ? Math.ceil(step) : Math.floor(step);

            if (obj.style.top == target) {
                clearInterval(obj.texttimer);
            }
            obj.style.top = obj.offsetTop + step + 'px';
        }, 30)
    }

    /* 声明索引为0 */
    let num=0;
    /* 点击右箭头的事件 */
    ar.addEventListener('click',function(){
        /* 点击一次，num加1 */
        num++;
         /* 判断num的值是否大于图片数量 */
        if(num>=loopli.length){
            num=0;
        }

        animateimg(loopul,-num*lilength);
        animateimg(smallul,-num*smalllength); 
        animatetext(textul,-num*textlength);
   })

    /* 点击左箭头往左滑动 */
    al.addEventListener('click',function(){
        num--;
        /* 最左边再点击时回到最右边的图 */
        if(num<0){
            num=loopli.length-1;
        }
        animateimg(loopul,-num*lilength);
        animateimg(smallul,-num*smalllength);
        animatetext(textul,-num*textlength);
    })


    /* 购票 */
    let can=this.document.querySelector('.can');
    let cannot=this.document.querySelector('.cannot');
    let buy=this.document.querySelector('.buy')
    let buyclose=this.document.querySelector('.left-top');
    can.addEventListener('click',function(){
         buy.style.animationPlayState='running';      
        buy.style.display='block'
    })
    buyclose.addEventListener('click',function(){
        buy.style.display='none';
    }) 
    buyclose.addEventListener('mouseenter',function(){
        buyclose.style.backgroundColor='rgba(176,196,222,.5)'
    })
    buyclose.addEventListener('mouseleave',function(){
        buyclose.style.backgroundColor='rgba(176,196,222,0)'
    })
    
    /* 买票 */
    let surebuy=this.document.querySelector('.submit');
    let price=this.document.querySelectorAll('.price');
    for(let i=0;i<price.length;i++){
        price[i].addEventListener('click',function(){
        price[i].style.border='1px #fff solid'
        })
    }
         surebuy.addEventListener('click',function(){
             alert('购买成功')
             buy.style.display='none'
        })

})
    